<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="fonts/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/master.css" />
		<script type="text/javascript" src="js/axios.min.js">
		</script>
		<script type="text/javascript" src="js/rem.js"></script>
	</head>
	<body>
		<div class="container">
			<header class="recommend-head">
				<ul class="recommend-nav">
					<li class="first"><em style="font-style: normal;">北京</em><span class="iconfont icon-xiajiantou xiala"></span></li>

					<li><a href="recommend-xindian.html">新店</a></li>
					<li><a href="recommend-zhuanti.html">专题</a></li>
					<li><a href="recommend-youhui.html">优惠</a></li>
					<li class="target">餐厅</li>
					<li><a href="recommend-beijing.html">咖啡</a></li>
					<li><a href="recommend-wenyu.html">文娱</a></li>
					<li class="iconfont icon-caidan more"></li>
				</ul>
			</header>
			<div class="content recommend-content">
				<ul class="recommend-bigbox">
					<li class="main">
						<img src="img/中餐.png">
						<div class="title">
							<h3>8月咖啡人气排行</h3>
							<a href="排行.html">立即查看</a>
						</div>
					</li>

					<li>
						<img src="img/cafet1.jpg">
						<div class="details">
							<h4>神武门外的故宫角楼咖啡馆</h4>
							<p class="name"><span class="iconfont icon-dingwei adress"></span>故宫角楼咖啡 | 东城区</p>
							<p class="price"><span class="yuan">￥</span>54</p>
						</div>
					</li>

					<li>
						<img src="img/cafet2.jpg">
						<div class="details">
							<h4>百年四合院天台咖啡馆</h4>
							<p class="name"><span class="iconfont icon-dingwei adress"></span>塘坊咖啡 | 东城区</p>
							<p class="price"><span class="yuan">￥</span>84</p>
						</div>
					</li>
				</ul>
			</div>
			<footer>
				<a href=""><span class="iconfont icon-gouwo target-span"></span>推荐</a>
				<a href="tips.html"><span class="iconfont icon-qingdan"></span>攻略</a>
				<a href="serach-restaurant.html"><span class="iconfont icon-sousuo "></span>搜索</a>
				<a href="around-all.html"><span class="iconfont icon-icon-yuanxk "></span>附近</a>
				<a href="mine.html"><span class="iconfont icon-wode"></span>我的</a>
			</footer>
		</div>
		<script type="text/javascript">
			let lis = document.querySelectorAll(".recommend-nav li");
			for (let i = 1; i < lis.length - 1; i++) {
				lis[i].onclick = function() {
					for (let j = 1; j < lis.length - 1; j++) {
						lis[j].classList.remove("target");
					}
					this.classList.add("target");
				}
				lis[0].onclick = function() {
					location.href = "城市.html";
				}
			}
			let first = document.querySelector('.first em')
			
			if(localStorage.getItem('city')){
				first.innerHTML = localStorage.getItem('city')
			}else{
				first.innerHTML = "北京";
			}
			axios.get("https://www.fastmock.site/mock/65027db1a3ee03c0c185fcb349e7497c/first/api/list", {
				params: {

				}
			}).then(res => {
				// console.log(res.data.data.list)
				var arr = res.data.data.list;
				
				let html = arr.map(v =>
					`
				<li>
					<img src=${v.image} >
					<div class="details">
						<h4>${v.title}</h4>
						<p class="name"><span class="iconfont icon-dingwei adress"></span>${v.address}</p>
						<p class="price"><span class="yuan">￥</span>${v.price}</p>
					</div>
				</li>
				`
				).join("");
				let list=document.querySelector(".recommend-bigbox");
				list.innerHTML+=html;
			})
			
		</script>
	</body>
</html>
